<template>
  <div class="app-prompt">
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Subject } from "rxjs";
import { Dialog } from 'vant';
@Component({
    components: {}
})
export default class AppPrompt extends Vue {
    /**
     * 弹出框配置信息
     *
     * @type {any}
     * @memberof AppPrompt
     */
    @Prop() public options!: any;

    /**
     * 弹出框模式: alert:通知模式, confirm:确认模式
     *
     * @type {string}
     * @memberof AppPrompt
     */
    @Prop() public mode!: string;

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppPrompt
     */
    public subject = new Subject();

    /**
     * 显示
     *
     * @memberof AppPrompt
     */
    public show() {
        if (Object.is(this.mode, "alert")) {
            Dialog.alert(this.options).then(() => {
                this.hide("alert");
            });
        } else if (Object.is(this.mode, "confirm")) {
            Dialog.confirm(this.options).then(() => {
                this.hide("confirm");
            }).catch(() => {
                this.hide("cancel");
            });
        }
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppPrompt
     */
    public hide(item?: any) {
        this.subject.next(item);
        this.subject.asObservable();
        document.body.removeChild(this.$el);
        this.$destroy();
    }
}
</script>
<style lang="less">
</style>
